<?php if (!Yii::app()->request->isAjaxRequest): ?>
    <div class="model_actions_toolbar">
        <?php $this->widget('backend.components.toolbar.MediaCategories'); ?>
    </div>
    <div>
        <?php $this->widget('backend.components.toolbar.MediaFinder', array('show_type' => 'icon')); ?>
    </div>
<?php endif; ?>
<div id="media_lists">

    <div class="clearfix" style="background-color: #fff;">
        <div style="margin: 10px;">
            <?php $this->widget('BackendPager', array('pages' => $pages)); ?>
        </div>

        <div class="clearfix" style="background-color: #fff;">
            <ul id="media_files_icons_list">
                <?php foreach ($models as $model): ?>
                <li id="icon_<?php echo $model->id; ?>">
                    <div class="icon">
                        <a class="nyroModal" href="<?php echo $this->createUrl('media/show', array('id' => $model->id)); ?>">
                            <span class="other_action"></span>
                                <?php echo CHtml::image($model->mediaIconSource); ?>
                        </a>
                        <a id="delete_<?php echo $model->id; ?>" href="javascript: void(0);" onclick="fnDeleteSelctedMediaFile(<?php echo $model->id; ?>);">
                            <span class="delete_action"></span>
                        </a>
                    </div>
                    <h4>
                            <?php echo CModifier::left(trim($model->file_name), 20, '...'); ?>
                        <sup><?php echo $model->fileSizeFormatKB; ?></sup>
                    </h4>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>

        <div style="margin: 10px;">
            <?php $this->widget('BackendPager', array('pages' => $pages)); ?>
        </div>

        <script type="text/javascript">
            function fnDeleteSelctedMediaFile(icon_id) {
                if (confirm('是否删除啊？') == false) {
                    return false;
                }
                if (parseInt(icon_id) <= 0) {
                    alert('error');
                    return false;
                }
                //        $('#icon_' + icon_id).unbind();
                //        return true;
                $.ajax({
                    type: "POST",
                    url: "<?php echo $this->createUrl('ajaxDelete'); ?>",
                    data: "id=" + icon_id,
                    success: function(msg){
                        if (parseInt(msg) == 1) {
                            //                    $('#icon_' + icon_id).hide();
                            $('#icon_' + icon_id).fadeOut("slow");
                        } else {
                            alert( "Error：" + msg );
                        }
                    }
                });
            }
        </script>

        <link rel="stylesheet" href="<?php echo Yii::app()->baseUrl; ?>/assets/backend/nyroModal/styles/nyroModal.css" type="text/css" media="screen" />
        <script type="text/javascript" src="<?php echo Yii::app()->baseUrl; ?>/assets/backend/nyroModal/js/jquery.nyroModal-1.5.5.pack.js"></script>
        <script type="text/javascript">
            $(function() {
                $('a.nyroModal').nyroModal({
                    bgColor: '#cccccc',
                    minWidth: 600,
                    minHeight: 400,
                    padding: 0,
                    title: 'Please select a image'
                });
            });
        </script>
    </div>
    <style type="text/css">
        ul#show_category_media_list { padding: 0 10px; margin: 0 10px; width: 90%; }
        ul#show_category_media_list li {
            line-height: 25px; width: 45%; float: left; list-style: square; margin-left: 5%;
        }
        ul#show_category_media_list li a {
            font-size: 1.1em; color: #aaa; font-weight: normal;
            text-decoration: none;
        }
        ul#show_category_media_list li a.selected {
            font-weight: bold; color: #000;
        }
    </style>

    <script type="text/javascript">
        function fnClick() {
            var path = $("input[name='media_id']:checked").val();
            $("#<?php echo $element_id; ?>").val(path);
        }
        function fnReturnPath(id, path) {
            $('#show_category_media_list > li > a').removeClass('selected');
            //            $("show_category_media_list > input[@type=radio]").attr('checked', "'" + id + "'");
            $('#radio_' + id).attr('checked', true);
            $("#" + id + " > a").addClass('selected');

            //        alert(id);
        }
    </script>
</div>